<script setup>

import {computed, onMounted, ref, watch} from "vue";
import Child from "@/components/child.vue";
import Async_test from "@/components/async_test.vue";

let count = ref(0);
const student = ref({name: "what", age: 12});
const colorType = ref("color");

const inputMessage = ref("");

function editStudent(arg) {
  arg.name = "详情";
  arg.age = 19;
  return arg;
}

const isAwesome = ref([true]);

function changeTest(arg) {
  arg[0] = !arg[0];
  // isAwesome.value = !isAwesome.value;
}

const todoList = ref([]);
let todoInfo = ref("");
const hideFinished = ref(false);

function addTodo(msg) {
  let list = todoList.value;
  list[list.length] = {id: list.length, msg: msg, done: false}
  todoInfo.value = "";
}

function removeTodo(id) {
  // let tmpList = [];
  let tmp = todoList.value;
  let nextId = 0;
  todoList.value = tmp.filter((t) => {
    let b = t.id !== id;
    t.id = nextId++;
    return b;
  });

}

const getUnfinishedTodoList = computed(() => {
  return hideFinished.value ? todoList.value.filter((t) => !t.done) : todoList.value;

})

const beFocus = ref(false);
const beBold = ref(false);

const pElementRef = ref(null)

onMounted(() => {
  console.log(pElementRef.value);
  pElementRef.value.textContent = 'mounted!'
})

let todoId = ref(1);
let todoData = ref(null);

// watch

async function getTodoData() {
  todoData.value = null;
  let response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  );
  todoData.value = await response.json();

}

getTodoData();
watch(todoId, getTodoData)
// 测试子级组件和父级组件之间的交互
const testMsg = ref("test");
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="../assets/logo.svg" width="125" height="125"/>

    <!--    <div class="wrapper">-->
    <!--      <HelloWorld msg="You did it!"/>-->
    <!--    </div>-->
    <!-- 测试button  -->
    <ol>
      <li class="font-css">
        this is a button test <br>
        <button class="button" @click="count++">
          Counter is {{ count }}
        </button>
      </li>
      <li class="font-css">
        this is a picture test <br>
        <img src="./assets/f9dcd100baa1cd11097a926abe17a6f1c2ce2dba.jpg" alt="图片加载异常">
      </li>
      <li class="font-css">
        this is reactive test <br>
        <div :class="colorType">{{ editStudent(student) }}</div>
      </li>
      <li class="font-css">
        this is a input test <br>
        <input type="text" v-model="inputMessage"><br>
        your input is <span style="font-weight: normal">{{ inputMessage }}</span>
      </li>
      <li class="font-css">
        this is if condition test <br>
        <button @click="changeTest(isAwesome)">chang description</button>
        <div v-if="isAwesome[0]"> this is awesome</div>
        <div v-else> terrible day</div>
      </li>
      <li class="font-css">
        this is dynamic tag test <br>
        <form @submit.prevent="addTodo(todoInfo)">
          <input v-model="todoInfo">
          <button>Add Todo</button>
        </form>
        <ul>
          <li v-for="todo in getUnfinishedTodoList" v-bind:key="todo.id">
            <input type="checkbox" v-model="todo.done">
            <span :class="{done:todo.done}">{{ todo.msg }}</span>
            <button @click="removeTodo(todo.id)">X</button>
          </li>
        </ul>
        <button
            :class="{bold:beBold}"
            @click="hideFinished = !hideFinished ;beBold = !beBold">
          {{ hideFinished ? 'Show all' : 'Hide completed' }}
        </button>
        <button :class="{color:beFocus}"
                @mouseenter="beFocus = true"
                @mouseleave="beFocus = false"
                @mouseout="beFocus = false"
                @click="todoList = []">
          clean all
        </button>
      </li>

      <li class="font-css">
        onMounted test <br>
        <div ref="pElementRef"> ppp</div>
      </li>

      <li class="font-css">
        this is watch test <br>
        <div> Todo ID now is {{ todoId }}</div>
        <button
            @click="todoId++"
            :disabled="!todoData"
        >
          Fetch data
        </button>
        <p>{{ !todoData ? "Loading" : todoData }}</p>
      </li>


      <li class="font-css">
        <child :msg="testMsg" @child-input="args => testMsg = args "></child>
        <div> 父级组件接受内容{{ testMsg }}</div>
      </li>


      <li class="font-css">
        <async_test></async_test>
      </li>
    </ol>
    <div>

    </div>
    <router-link to="/">BACK TO TITLE</router-link>

  </header>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  //position: absolute;
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}

.font-css {
  font-weight: bold;
}

.color {
  color: red;
}

.bold {
  font-weight: bold;
}

.done {
  text-decoration-line: line-through;
}

</style>
